<template>
  <div class="maxbox">
    <div id="appp">
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="beijing"
      ></vue-particles>
    </div>
    <!--

    下面介绍参数配置文件 app.js 文件的使用：

    color: String类型。默认'#dedede'。粒子颜色。
    particleOpacity: Number类型。默认0.7。粒子透明度。
    particlesNumber: Number类型。默认80。粒子数量。
    shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
    particleSize: Number类型。默认80。单个粒子大小。
    linesColor: String类型。默认'#dedede'。线条颜色。
    linesWidth: Number类型。默认1。线条宽度。
    lineLinked: 布尔类型。默认true。连接线是否可用。
    lineOpacity: Number类型。默认0.4。线条透明度。
    linesDistance: Number类型。默认150。线条距离。
    moveSpeed: Number类型。默认3。粒子运动速度。
    hoverEffect: 布尔类型。默认true。是否有hover特效。
    hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
    clickEffect: 布尔类型。默认true。是否有click特效。
    clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
    class="beijing" 设置背景图片

    <style lang="less">
    // 这一个部分是插件的哦
    .beijing {
    background-image: url("./start.jpg");
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    </style>
    -->
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h1 class="title">
        <i class="el-icon-menu"></i>
        学生成绩管理-登录
      </h1>

      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="loginForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="text" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>




      <el-form-item>
        <el-checkbox v-model="loginForm.checked" class="rememberme">记住密码</el-checkbox>

        <el-radio  v-model="loginForm.type"  label="2">教师</el-radio>
        <el-radio  v-model="loginForm.type"  label="1">学生</el-radio>
        <el-radio  v-model="loginForm.type"  label="3">管理员</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import api from "../../axios/api"
  export default {
    name: "login",
    data() {
// 包含特殊字符哦
      const checkSpecificKey = function(str) {
// 正则表达
        var specialKey =
          "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
        for (var i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) != -1) {
//specialKey是否含有某一个你输入的特殊字符
            return false; //如果你输入的账号中有特殊字符 直接退出来哦
          }
        }
        return true;
      };

// 验证密码的函数
      const pass = (rule, value, callback) => {
        if (value === "") {
//为空的验证
          callback(new Error("请输入密码"));
        } else if (value.length < 3 || value.length > 6) {
//这是密码长度的验证
          callback(new Error("密码长度 3 - 6 位"));
        } else if (!checkSpecificKey(value)) {
//
          callback(new Error("密码不能包含特殊字符"));
        } else {
          if (this.loginForm.checkPass !== "") {
// 如果确认密码不为空
            this.$refs.loginForm.validateField("checkPass"); // 调用确认密码的验证（一致性验证）
          }
// 成功的回调
          callback();
        }
      };

// 确认密码的验证函数
      const checkPass = (rule, value, callback) => {
// rule是传入的验证规则 value是用户输入的值 callback是一个回调函数
        if (value === "") {
// 如果等于空
          console.log(value);
          callback(new Error("请再次输入密码11")); // 输出提示
        } else if (value !== this.loginForm.password) {
// 如果确认密码 和 密码不同
          callback(new Error("两次输入密码不一致1"));
        }
// 如果直接调用 不传入任何错误信息 就是成功 绿色的勾勾
        callback();
      };

      return {
// 登录表单的数据
        loginForm: {
          username: "",
          password: "",
          type:"",
          modelName:"",
          checked:""
        },
// 验证的规则（一份数据）
        rules: {
// 验证用户名
          username: [
// 非空验证
            { required: true, message: "请输入账号", trigger: "blur" },
            { min: 2, max: 5, message: "账号长度在 2 - 5 位", trigger: "blur" }
          ],
// 验证密码
          password: [
// 非空验证
            { required: true, validator: pass, trigger: "blur" }
          ],


          /*
          验证规则字段说明：
          { required: true/false 必填, message: "错误的提示信息", trigger: "触发验证的方式" }
          { min: 最小长度, max: 最大长度, message: "错误的提示信息", trigger: "触发验证的方式" }
          { validator： 自定义验证规则函数名， trigger: 'blur'}
          */
        }
      };
    },


    methods: {
// 点击登录按钮 触发这个函数
      submitForm(formName) {
        var _this = this;
// 获取表单组件 调用验证方法
        this.$refs[formName].validate(valid => {
// 如果所有验证通过 valid就是true
          if (valid) {
            //alert("前端验证通过 可以提交给后端！");
// 后续就可以把收集的账号和密码 一起发送给后端 验证用户名和密码的正确性。
// 收集账号和密码
            var modelName = "";
            if(this.loginForm.type==1){
              this.loginForm.role = 'Student';
            }else  if(this.loginForm.type==2){
              this.loginForm.role = 'Teacher';
            }else  if(this.loginForm.type==3){
              this.loginForm.role = 'Admin';
            }



// 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否正确）
// console.log(params)
// 直接跳转到后端主页
// this.$router.push("/");

            //var params = {"username":this.loginForm.username,"password":this.loginForm.password,"modelName":this.loginForm.modelName};
            _this.login();
          } else {
// 否则就是false
            alert("前端验证失败 不能提交给后端！");
            return false;
          }
        });
      },
// 点击重置按钮 触发这个函数
      resetForm(formName) {
// this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
        this.$refs[formName].resetFields();
      },
      login(){
        console.log( this.loginForm)
        // console.log(JSON.stringify( {"username":this.loginForm.username,"password":this.loginForm.password,"role":this.loginForm.role}))
        api.setDataFromAxios("/api/TestWeb/loginController/login",
          {"username":this.loginForm.username,"password":this.loginForm.password,"role":this.loginForm.role}
        , "post")
          .then(dto => {
            let account = dto.t;
            if(dto.code==200){
               this.$message.success(dto.msg);
              if(this.loginForm.type==1) {
                console.log(dto);

                this.$router.push({
                  name:"FrontStudent",//这个name就是你刚刚配置在router里边的name
                  params: {
                    student: account
                  }
                });
              }
              else if (this.loginForm.type==2) {
                console.log(dto);
                this.$router.push({
                  name: "FrontTeacher",//这个name就是你刚刚配置在router里边的name
                  params: {
                    teacher: account
                  }
                })
              }
              else if (this.loginForm.type==3) {
                  console.log(dto);
                  this.$router.push({
                    name:"backIndex",//这个name就是你刚刚配置在router里边的name
                    params: {
                      admin: account
                    }
                  });
                }
            }else if (dto.code==403) {
              console.log(dto)
               this.$message.error(dto.msg);
              this.loginForm.password = '';
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      }
    },



  };
</script>
<style scoped>
  .beijing {
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
    margin: 10 auto;
    text-align: center;
  }

  .el-form {

    height: 350px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .el-form .el-form-item {

    margin-top: 28px;

  }

  .el-form .el-form-item .el-form-item__label {
    color: #ffffff;
  }

  .el-form .el-form-item .title {
    color: #ffffff;
    padding-left: 40px;
  }
</style>
